<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式重置 */
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: red;
        }

        body {
            background-color: brown;
            font-size: 14px;
            color: #333;
        }

        /* 样式重置 end */

        .part-1 {
            width: 1190px;
            height: 460px;
            background: red;
            margin: 0 auto;
        }

        .part-1 .left {
            width: 230px;
            height: 460px;
            background-color: #fff;
            /* 子绝父相 */
            position: relative;
        }

        .nav-list li {
            height: 51px;
            line-height: 50px;
        }

        .nav-list li img {
            height: 16px;
            /* 左右间距和居中 */
            margin: 0 12px;
            /* vertical-align: middle; */
            vertical-align: -3px;
        }

        .nav-list li:hover {
            background-color: #eee;
        }

        .list-cont {
            position: absolute;
            top: 0;
            left: 230px;
            width: 700px;
            height: 460px;
            background-color: #fff;
            /* 隐藏 */
            display: none;
        }

        .nav-list li:hover .list-cont {
            display: block;
        }
    </style>
</head>

<body>
    <div class="part-1">
        <div class="left">
            <ul class="nav-list">
                <li>
                    <img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">
                    <a href="#">中低压</a>
                    /
                    <a href="#">工控</a>
                    /
                    <a href="#">照明</a>
                    /
                    <a href="#">电工</a>
                    <!-- 弹出层 -->
                    <div class="list-cont">
                        弹出层1
                    </div>
                </li>
                <li>
                    <img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">
                    一级分类2
                    <!-- 弹出层 -->
                    <div class="list-cont">
                        弹出层2
                    </div>
                </li>
                <li><img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">一级分类3
                    <!-- 弹出层 -->
                    <div class="list-cont">
                        弹出层3
                    </div>
                </li>
                <li><img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">一级分类4
                    <!-- 弹出层 -->
                    <div class="list-cont">
                        弹出层4
                    </div>
                </li>
                <li><img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">一级分类5</li>
                <li><img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">一级分类6</li>
                <li><img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">一级分类7</li>
                <li><img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">一级分类8</li>
                <li><img src="./img/252b1d0b-fc69-42dd-8bff-d39d7b0b33d6.png" alt="">一级分类9</li>
            </ul>
            <!-- 弹出内容 -->
            <!-- <div class="content-list">

            </div> -->
        </div>
    </div>
</body>

</html>